<template>
    <div style="text-align: left; margin-left: 100px">
        <div>
            <label>银行名称</label
            ><el-input
                v-model="bankData.bankName"
                placeholder="请输入内容"
                style="width: 60%; margin-left: 30px"
            ></el-input>
        </div>

        <div>
            <div
                slot="tip"
                class="el-upload__tip"
                style="line-height: 20px; font-size: 16px; margin-bottom: 10px"
            >
                银行图标
            </div>
            <div id="bank">
                <div class="circle">
                    <img :src="images" class="image" />
                </div>
                <el-button
                    type="primary"
                    @click="drawer = true"
                    style="height: 40px"
                    ><i class="el-icon-upload el-icon--right"></i
                    >上传图片</el-button
                >
            </div>

            <el-drawer
                title="我是标题"
                :visible.sync="drawer"
                :with-header="false"
                show-close
                direction="ttb"
                class="upload_image"
            >
                <el-upload
                    class="upload-demo"
                    :drag="true"
                    action="http://dev.woniulab.com:7689/minio/upload/images"
                    multiple
                    :on-success="handleAvatarSuccess"
                >
                    <i class="el-icon-upload"></i>
                    <div class="el-upload__text">
                        将文件拖到此处，或<em>点击上传</em>
                    </div>
                    <div class="el-upload__tip" slot="tip">
                        只能上传jpg/png文件，且不超过500kb
                    </div>
                </el-upload>
            </el-drawer>
        </div>

        <div style="line-height: 70px">
            <span style="margin-right: 30px">单笔限额</span>
            <template>
                <el-input-number
                    v-model="bankData.singleLimit"
                    controls-position="right"
                    @change="handleChange"
                    :min="1"
                    :max="10000"
                ></el-input-number>
            </template>
        </div>

        <div style="line-height: 0">
            <span style="margin-right: 30px">当日限额</span>
            <template>
                <el-input-number
                    v-model="bankData.dayLimit"
                    controls-position="right"
                    @change="handleChange"
                    :min="1"
                    :max="10000"
                ></el-input-number>
            </template>
        </div>
        <div>
            <el-button type="primary" @click="updateBank">保存</el-button>
            <el-button>取消</el-button>
        </div>
    </div>
</template>

<script>
export default {
    props: ["id"],
    data() {
        return {
            bankData: {},
            images: "",
            drawer: false,
            input: "",
            fileList: [],
            num: 1,
        };
    },
    mounted() {
        this.getone();
    },
    methods: {
        // 获取银行
        async getone() {
            const res = await this.api.bank.getOne({
                id: this.id,
            });
            console.log(res);
            if (res.code == 200) {
                this.bankData = res.data;
                this.images = res.data.bankimgSrc;
            }
        },
        //修改银行
        async updateBank() {
            console.log(this.bankData);
            const res = await this.api.bank.updateBank({
                ...this.bankData,
            });
            if (res.code == 200) {
                this.$message({
                    showClose: true,
                    message: "修改成功",
                    type: "success",
                });
                this.$router.push('/home/bankmanagement')
            } else {
                this.$message({
                    showClose: true,
                    message: "修改失败",
                    type: "error",
                });
            }
        },
        //图片
        handleAvatarSuccess(res, file) {
            console.log(res,file)
            this.images = URL.createObjectURL(file.raw);
            this.bankData.bankimgSrc=res.data
        },

        //加减
        handleChange(value) {
            console.log(value);
        },
    },
};
</script>

<style scoped>
.upload-demo {
    line-height: 0;
    margin-top: 50px;
}
#bank {
    width: 50%;
    display: flex;
    justify-content: space-around;
    align-items: flex-end;
    margin-bottom: 30px;
}
.circle {
    border: 6px solid #ccc;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    box-sizing: border-box;
}
.image {
    width: 100%;
    height: 100%;
    border-radius: 50%;
}
.image:hover {
    transform-origin: right 15%;
    transform: rotate(-70deg);
    transition: transform 1s linear;
}
.upload_image {
    margin-top: 150px;
    margin-left: 500px;
    text-align: center;
    width: 40%;
    height: 1200px;
}
</style>